// AJAX作用：
// * 异步的 JS 和 XML
// * 通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据(网页内容发生更改不刷新网页)


const btn = document.querySelectorAll('button');
const box = document.getElementById('box1');

// 配置url
axios.defaults.baseURL = 'http://127.0.0.1:9000'
// 发送GET请求
btn[0].addEventListener('click', function () {
    axios.get('/', {
        //url参数
        params: {
            username: 'admin',
            password: 'admin'
        },
        //设置请求头
        herders: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).then(r => {
        console.log('成功！')
        box.innerHTML = JSON.stringify(r.data)
        console.log(r.data)
    }).catch(err => {
        console.log('失败！' + err)
    })
})
//发送POST请求
btn[1].addEventListener('click', function () {
    axios.post('/', {//第一个参数url、第二个是data请求体、第三个是其他设置
            //设置请求体
            name: '张三',
            sex: 19
        },
        {
            //url参数
            params: {
                username: 'admin',
                password: 'admin'
            },
            //设置请求头
            herders: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(r => {
        console.log('成功！')
        box.innerHTML = JSON.stringify(r.data)
        console.log(r.data)
    }).catch(err => {
        console.log('失败！' + err)
    })
})
// axios函数发送请求
btn[2].addEventListener('click', function () {
    axios({
        //请求方法
        method: 'POST',
        //url
        url: '/',
        //url参数
        params: {
            username: 'admin',
            password: 'admin'
        },
        //请求头
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        //请求体参数
        data: {
            name: '张三',
            age: 19
        }
    }).then(r => {
        console.log('成功！')
        box.style.backgroundColor='pink'
        box.style.color='black'
        box.innerHTML = JSON.stringify(r.data)
        console.log(r)
    }).catch(err => {
        console.log('失败！' + err)
    })
})